அடுத்தது

Angular First App

உங்கள் முதல் Angular பயன்பாட்டை உருவாக்குங்கள்

முதல் Angular பயன்பாடு

இப்போது உங்கள் சூழல் தயாராக உள்ளது, ஒரு எளிய Angular பயன்பாட்டை உருவாக்குவோம்.

தயார்நிலை:

நீங்கள் ஏற்கனவே Angular CLI, Node.js மற்றும் npm ஐ நிறுவியிருப்பதாகக் கருதப்படுகிறது. இல்லையென்றால், "Angular Get Started" பகுதிக்குத் திரும்புக.

படி 1: src/main.ts ஐத் திறக்கவும்

Angular 20 பயன்பாடுகள் ஒரு ஸ்டேண்டலோன் ரூட் கூறை துவக்குகின்றன.

நீங்கள் அதை main.ts இல் இன்லைனில் வரையறுக்கலாம்.

எடுத்துக்காட்டு:

உங்கள் சொந்த Angular சேவையகத்தைப் பெறுங்கள்

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
Hello, World!
`
})
class App {}

bootstrapApplication(App);

நேரடி மீளேற்றம்:

Angular பயன்பாடு இயங்கும் போது (கடந்த அத்தியாயத்தில் காட்டப்பட்டுள்ளது போல ng serve உடன் தொடங்கப்பட்டது), உலாவி சேமிக்கும் போது தானாகவே மீளேற்றப்படும்.

கூறுகள் பற்றிய விரைவு அறிமுகம்

  • கூறு என்பது ஒரு காட்சியைக் கட்டுப்படுத்தும் ஒரு வகுப்பாகும் (அதன் டெம்ப்ளேட்).
  • ஒவ்வொரு கூறுக்கும் ஒரு தேர்வியும் உள்ளது (எ.கா., app-root) நீங்கள் HTML இல் வைக்கிறீர்கள்.
  • ரூட் கூறு index.html இல் <app-root> உள்ளே ரெண்டர் செய்யப்படுகிறது.
  • கூறுகளைப் பற்றி ஆழமாகப் படிப்போம்: கூறுகள் பகுதியில்.

படி 2: index.html இல் ஹோஸ்ட் உறுப்பு

Angular ரூட் கூறை அதன் தேர்வியின் தோன்றும் இடத்தில் ரெண்டர் செய்கிறது.

src/index.html ஐத் திறந்து, ரூட் டேக் <body> உள்ளே இருப்பதை உறுதிப்படுத்தவும்.

டேக் பொருத்தம்:

டேக் உங்கள் கூறு தேர்வியுடன் பொருந்த வேண்டும் படி 1 இலிருந்து (இங்கே அது app-root).

index.html (குறைந்தது)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Angular App</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <!-- Host element -->
    <app-root></app-root>
  </body>
</html>

முக்கிய குறிப்பு:

ரூட்டிங் பின்னர் வேலை செய்வதற்கு <base href="/"> ஐ <head> இல் வைத்திருங்கள்.

CLI உடன் தானாக உருவாக்கப்பட்டது:

நீங்கள் CLI உடன் திட்டத்தை உருவாக்கியிருந்தால், இந்த டேக் பொதுவாக ஏற்கனவே இருக்கும்.

படி 3: சில தரவுகளைப் பைண்ட் செய்யவும்

ஒரு பண்பைச் சேர்த்து இடைச்செருகல் மூலம் அதைக் காட்டவும்:

main.ts (மேம்படுத்தப்பட்டது)

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
Hello, {{ name }}!
`
})
class App { name = 'Angular 20'; }

bootstrapApplication(App);

இடைச்செருகல் முன்

<h1>Hello, World!</h1>

நிலையான உரை

இடைச்செருகல் பின்

<h1>Hello, {{ name }}!</h1>

டைனமிக் தரவு பைண்டிங்

இடைச்செருகல்:

இடைச்செருகல் கூறு பண்பு மாறும்போது காட்சியை தானாகவே புதுப்பிக்கிறது.

செயல்திறன் குறிப்பு:

  • வெளிப்பாடுகளை எளிதாக வைத்திருங்கள்.
  • செயல்திறனுக்காக டெம்ப்ளேட்டுகளில் நேரடியாக முறைகளை அழைப்பதை விட பண்புகளைப் பயன்படுத்தவும்.

திட்ட அமைப்பு

ஒரு குறைந்தபட்ச Angular பணியிடத்தில் முக்கிய கோப்புகள்:

src/
main.ts - bootstrapApplication உடன் பயன்பாட்டை துவக்குகிறது
app/
app.component.ts - ரூட் கூறு (பயன்படுத்தப்பட்டால்). ரூட் main.ts இல் இன்லைனிலும் வரையறுக்கலாம்
நீங்கள் உங்கள் கூறுகள் மற்றும் அம்சங்களைச் சேர்க்கும் இடம்
index.html - <app-root> ஐக் கொண்டிருக்கும் ஹோஸ்ட் பக்கம்
styles.css - பயன்பாட்டிற்கான உலகளாவிய பாணிகள்

angular.json - Angular பணியிட கட்டமைப்பு (கட்டமைத்தல், சேவை செய்தல், சோதனை)
package.json - ஸ்கிரிப்ட்கள் மற்றும் சார்புகள்

TypeScript கோப்புகள்

  • main.ts - பயன்பாடு நுழைவுப் புள்ளி
  • app.component.ts - முதன்மை கூறு
  • மற்ற கூறு கோப்புகள்

HTML/CSS கோப்புகள்

  • index.html - முதன்மை HTML
  • styles.css - உலகளாவிய பாணிகள்
  • கூறு டெம்ப்ளேட்டுகள்

கட்டமைப்பு கோப்புகள்

  • angular.json - Angular கட்டமைப்பு
  • package.json - npm சார்புகள்
  • tsconfig.json - TypeScript கட்டமைப்பு

பயிற்சி

உங்கள் அறிவைச் சோதிக்க இந்தப் பயிற்சியை முயற்சிக்கவும்:

❓main.ts இல் ஒரு ஸ்டேண்டலோன் Angular கூறை துவக்கும் API எது?

bootstrapApplication
✓ சரி! bootstrapApplication ஒரு ஸ்டேண்டலோன் கூறை துவக்கப் பயன்படுகிறது.
bootstrapModule
✗ தவறானது! bootstrapModule NgModule-களுடன் பழைய Angular பதிப்புகளில் பயன்படுத்தப்பட்டது.
platformBrowserDynamic
✗ தவறானது! platformBrowserDynamic ஸ்டேண்டலோன் கூறுகளுக்குப் பயன்படுத்தப்படாத மற்றொரு பழைய API.

API பரிணாமம்:

Angular 14+ ஸ்டேண்டலோன் கூறுகளை அறிமுகப்படுத்தியது. bootstrapApplication NgModule கட்டமைப்பு தேவையில்லாமல் கூறுகளை நேரடியாக துவக்கப் பயன்படுகிறது, குறியீட்டை எளிமையாக்குகிறது.

அடுத்தது